<template>
  <div class="elasticsearchMain">
    <el-form :model="formInline" class="formulas" :rules="rules" ref="myform">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formInline.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-model="formInline.content" placeholder="请输入内容" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    <div class="searchDiv">
       <div class="searchBar">
         <el-input v-model="searchValue" placeholder="请输入检索内容"></el-input>
         <el-button type="primary" @click="query();currentPage=1" @keyup.enter="query();currentPage=1">查询</el-button>
       </div>
      <div style="text-align: left;padding: 10px;font-size: 13px;color: #999;">为您找到相关结果约{{total}}个</div>
      <div class="content">
         <div class="list" v-for="(item, index) of dataSource" :key="index">
           <div class="title">
             <div
                 v-if="item.highlight.title && item.highlight.title.length > 0"
                 v-html="item.highlight.title[0]"
             ></div>
             <div v-else >{{ item._source.title }}</div>
           </div>
           <div class="item" v-if="item.highlight.content && item.highlight.content.length > 0">
             <div v-for="(item2, index2) of item.highlight.content" :key="index2" v-html="item2"></div>
           </div>
         </div>
      </div>
      <div>
        <el-pagination layout="prev, pager, next"
                       :total="total"
                       v-model:currentPage="currentPage"
                       @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main.vue",
  data() {
    return {
      currentPage: 1,
      total: 0,
      dataSource: [],
      searchValue: '',
      formInline: {
        title: '',
        content: '',
      },
      rules: {
        title: [{required: true, trigger: 'blur'}],
        content: [{required: true, trigger: 'blur'}]
      },
    }
  },
  mounted() {
     this.$nextTick(() => {
       this.searchValue = '湖南';
       this.query()
     })
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query()
    },
    query() {
      let queryform = {
        name: this.searchValue,
        page: this.currentPage-1
      }
      this.$http.get(`/flowableapi/es/query`, {params: queryform}).then((res) => {
            if (res.data && res.data.success) {
              this.dataSource = res.data.data.hits.hits
              this.total = res.data.data.hits.total
            }
      })
    },
    onSubmit() {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            this.$http.post(`/flowableapi/es/save`, this.formInline).then((res) => {
              if (res.data && res.data.success) {
                this.$message.success('保存成功');
              }
            })
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
.elasticsearchMain {
  height: 100%;
  display: flex;
  flex-direction: column;
  .formulas {
    padding: 5px;
    box-shadow: -10px 0 10px #D3D3D3, /*左边阴影*/ 10px 0 10px #D3D3D3, /*右边阴影*/
      0 -10px 10px #D3D3D3, /*顶部阴影*/ 0 10px 10px #D3D3D3;
  }
  /deep/ .el-form-item__content {
    display: block !important;
  }
  .searchDiv {
    flex: 1;
    flex-grow: 1;
    padding: 0.5rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    .searchBar {
      padding: 5px;
      display: flex;
    }
    .content {
      flex: 1;
      flex-grow: 1;
      overflow: auto;
      .list {
        padding: 1rem;
        margin-top: 1rem;
        text-align: left;
        border-bottom: 1px solid #DCDCDC;
        .title {
          font-weight: 400;
          font-size: 2rem;
        }
        .item{
          font-style: normal;
          font-variant-ligatures: normal;
          font-variant-caps: normal;
          font-variant-numeric: normal;
          font-variant-east-asian: normal;
          font-weight: normal;
          font-stretch: normal;
          font-size: 1.5rem;
          line-height: 21px;
          font-family: Arial, sans-serif;
          margin-top: 1rem;
        }
      }
    }
  }
}
</style>